<template>
    <el-row :gutter="gutter" class="upload-container" v-loading="listLoading">
        <el-col v-for="(item, index) in productList" :key="item.productId" :span="span">
            <div class="layout-block" :style="{marginBottom: gutter+'px'}">
                <div class="layout-item">
                    <img class="uploaded-img" :src="item.productImg" alt="">
                    <div class="uploaded-tools">
                        <i class="el-icon-edit-outline" @click.stop="productEdit(index)" />
                        <i class="el-icon-delete" @click.stop="imgDelete(index)" />
                        <div class="tools-move">
                            <i class="el-icon-arrow-left" @click.stop="imgMove(index,-1)" />
                            <i class="el-icon-arrow-right" @click.stop="imgMove(index,1)" />
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="span">
            <div class="layout-block">
                <div class="layout-item upload-btn" @click="newProduct">
                    <i class="el-icon-plus" />
                </div>
            </div>
        </el-col>
        <el-dialog :visible.sync="dialogVisible" top="74">
            <img style="max-width: 100%;max-height: 80vh" :src="dialogImageUrl" alt="">
        </el-dialog>
        <el-dialog title="信息编辑" top="10vh" custom-class="custom-dialog-form" :visible.sync="dialogFormVisible" :close-on-click-modal="false" @closed="dialogFormClose">
            <el-form ref="dialogForm" :model="temp" label-position="top">
                <el-form-item v-for="item in fieldList" :key="item.name" :label="item.desc" :prop="item.name">
                    <UploadImgList v-if="item.type==='img'" v-model="temp[item.name]" :gutter="20" :span="6" :multiple="false" />
                    <el-input v-else-if="item.type==='textarea'" v-model="temp[item.name]" type="textarea" :autosize="{minRows:3, maxRows:5}" :placeholder="'请输入'+item.desc" />
                    <el-input v-else v-model="temp[item.name]" :placeholder="'请输入'+item.desc" />
                </el-form-item>
            </el-form>
            <div class="el-message-box__btns">
                <button type="button" class="el-button el-button--default el-button--small" @click="dialogFormVisible = false"><span>取消</span></button>
                <button type="button" class="el-button el-button--default el-button--small el-button--primary" @click="dialogFormSubmit"><span>保存</span></button>
            </div>
        </el-dialog>
    </el-row>
</template>

<script>
import { remakeUrl, arrMove, debounce } from '@/utils'
import { productUpdate, productUpdateList, productDeletes } from '@/api/contentProduct'
import UploadImgList from '@/components/UploadImgList';
export default {
    name: 'ProductInLine',
    components: { UploadImgList },
    props: {
        gutter: Number,
        span: Number,
        fieldList: Array,
        search: Function,
        insert: Function
    },
    data: function() {
        return {
            listLoading: true,
            productList: [],
            temp: {},
            dialogVisible: false,
            dialogFormVisible: false,
            dialogImageUrl: '',
            uploading: false,
            productUpdateAllFlag: false
        }
    },
    created() {
        this.getData();
    },
    methods: {
        remakeUrl,
        getData() {
            this.listLoading = true;
            this.search().then(res => {
                this.productList = res.data;
                this.listLoading = false;
            });
        },
        resetTemp() {
            this.temp = {};
        },
        imgDelete(index) {
            var ids = [this.productList[index].productId];
            this.$confirm('您确定删除吗?', '提示', {
                customClass: 'custom-msgbox',
                center: true
            }).then(() => {
                productDeletes(ids).then(res => {
                    this.getData();
                    this.$notify({
                        message: '删除成功',
                        type: 'success'
                    });
                });
            });
        },
        imgMove(index, step) {
            this.productList = arrMove(this.productList, index, step);
            this.productUpdateAll();
        },
        productUpdateAll() {
            if (this.productUpdateAllFlag) clearTimeout(this.productUpdateAllFlag);
            this.productUpdateAllFlag = setTimeout(() => {
                var param = [...this.productList];
                param.map((item, index) => {
                    item.productSort = index + 1;
                });
                productUpdateList(param);
            }, 3000);
        },
        productEdit(index) {
            this.temp = Object.assign({}, this.productList[index]);
            this.dialogFormVisible = true;
        },
        newProduct() {
            this.resetTemp();
            this.dialogFormVisible = true;
        },
        dialogFormClose() {

        },
        dialogFormSubmit() {
            var param = Object.assign({}, this.temp);
            console.log('信息提交', param);
            this.handleSubmit(param).then(res => {
                this.getData();
                this.$notify({
                    message: '保存成功',
                    type: 'success'
                });
                this.dialogFormVisible = false;
            });
        },
        handleSubmit(param) {
            if (param.productId) {
                return productUpdate(param)
            } else {
                return this.insert(param)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.upload-container {
    .layout-block {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
    }

    .layout-item {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 4px;
        background-color: #999;
        overflow: hidden;

        .uploaded-img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .uploaded-tools {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            font-size: 20px;
            color: #e0e0e0;
            background-color: rgba(0, 0, 0, .5);
            opacity: 0;
            visibility: hidden;
            transition: .3s;

            i {
                padding: 5px;
                cursor: pointer;
                transition: .3s;

                &:hover {
                    color: #fff;
                }
            }

            .tools-move {
                position: absolute;
                bottom: 0;
                left: 0;
            }
        }

        &:hover {
            .uploaded-tools {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    .upload-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px dashed #d9d9d9;
        background-color: #fbfdff;
        border-radius: 4px;
        transition: .3s;
        cursor: pointer;

        i {
            position: relative;
            font-size: 28px;
            color: #8c939d;
            transition: .3s;
            z-index: 5;
        }

        .uploaded-single{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            z-index: 1;
            transition: .3s;
        }
        &:hover {
            background-color: #e6ebf1;
            border-color: #1d38FF;
            i{
                color: #1d38FF;
            }
        }
        &.has-img {
            i {
                opacity: 0;
                transition: .3s;
            }
            &:hover{
                i {
                    color: #fff;
                    opacity: 1;
                }
            }
        }
    }

    :v-deep {
        .el-upload {
            display: block;
        }
    }
}
</style>
